import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from './vars.css';
import { fallBackGlobalStyle } from './tools';

export const knnoSwitch = style({
	appearance: 'none',
	display: 'inline-block',
	position: 'relative',
	fontSize: '1rem',
	width: '2.7em',
	height: '1em',
	verticalAlign: 'middle',
	backgroundColor: vars.color.secondaryText,
	cursor: 'pointer',
	border: 'none',
	boxSizing: 'border-box',
	margin: '0',
	flexShrink: 0,
	flexGrow: 0,
	borderRadius: '0.8em',
	maskImage: 'none',
	transition: 'background-color 0.1s ease-in-out',
});

globalStyle(`${knnoSwitch}:after`, {
	boxSizing: 'border-box',
	content: ' ',
	display: 'block',
	position: 'absolute',
	top: 'calc(50% - 0.75em)',
	bottom: 0,
	left: 0,
	borderRadius: '50%',
	width: '1.5em',
	height: '1.5em',
	boxShadow: `0 0 4px 2px ${vars.color.shadow}`,
	backgroundColor: '#fff',
	transition: 'left 0.1s ease-in-out',
});

globalStyle(`${knnoSwitch}:checked`, {
	backgroundColor: vars.color.accent,
});

globalStyle(`${knnoSwitch}:checked:after`, {
	left: '1.2em',
});

globalStyle(`${knnoSwitch}[disabled]`, {
	cursor: 'not-allowed',
	backgroundColor: vars.color.disabledText,
});

globalStyle(`${knnoSwitch}[disabled]:after`, {
	backgroundColor: 'light-dark(#ddd, #666)',
});

fallBackGlobalStyle(
	`${knnoSwitch}[disabled]:after`,
	{
		backgroundColor: '#ddd',
	},
	{
		backgroundColor: '#666',
	}
);
